<template>
  <Container>
    <div class="text-danger">
      <div>
        <span class="number">{{$store.state.pointer+1}}</span>
        <span class="number-small">&nbsp;/&nbsp;{{$store.state.content.length}}</span>
      </div>
      <div class="finishinfo" v-show="!isFinished&&isTimeLimited">剩余时间：{{timeLeftString}}</div>
      <div class="finishinfo" v-show="isFinished">
        全部完成，请点击
        <b>“提交”</b>
      </div>
    </div>
    <ViewMC v-if="isType('mc')&&refresh" :data="currentData"/>
    <ViewFB v-if="isType('fb')&&refresh" :data="currentData"/>
  </Container>
</template>

<script>
import Container from "@/components/Container.vue";
import ViewMC from "@/components/ViewMC.vue";
import ViewFB from "@/components/ViewFB.vue";
export default {
  name: "Home",
  components: {
    Container,
    ViewMC,
    ViewFB
  },
  data() {
    return {
      refresh: true,
      seconds: 0
    };
  },
  computed: {
    isFinished() {
      if (!this.$store.state.recorder || !this.$store.state.content) {
        return false;
      }
      return (
        this.$store.state.recorder.length == this.$store.state.content.length
      );
    },
    currentNumber() {
      return this.$store.state.pointer + 1;
    },
    currentIndex() {
      return this.$store.state.sequence[this.currentNumber - 1];
    },
    currentData() {
      if (this.$store.state.content) {
        return this.$store.state.content[this.currentIndex];
      }
      return null;
    },
    currentJSON() {
      if (this.currentData) {
        return JSON.stringify(this.currentData);
      }
      return "json has not loaded yet.";
    },
    timeLeft() {
      return this.$store.state.timeLimit - this.$store.state.timeUsed;
    },
    timeLeftString() {
      return (
        Math.floor(this.timeLeft / 60) + "分" + (this.timeLeft % 60) + "秒"
      );
    },
    isTimeLimited() {
      return this.$store.state.isTimeLimited;
    }
  },
  methods: {
    isType(type) {
      if (this.currentData) {
        return this.currentData.type === type;
      }
      return false;
    },
    timeDown() {
      if (this.isTimeLimited) {
        let clock = window.setInterval(() => {
          this.$store.commit("timeDown");
        }, 1000);
        window.console.log(clock);
      }
    }
  },
  watch: {
    currentNumber() {
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
    }
  },
  mounted() {
    this.timeDown();
  }
};
</script>

<style>
.number {
  font-size: 5em;
  opacity: 0.25;
  padding: 0;
  margin: 0;
  line-height: 1em;
}
.number-small {
  font-size: 3em;
  opacity: 0.25;
  padding: 0;
  margin: 0;
  line-height: 0.5em;
}
.finishinfo {
  text-align: justify;
  font-size: 1em;
  opacity: 0.25;
  padding: 0;
  margin: 0;
}

.notice-badge {
  border-radius: 0.5em;
  padding: 0.25em 0.5em;
  margin: 0;
  margin-right: 0.5em;
  font-size: 0.75em;
  text-align: center;
}
.notice-warrap {
  text-align: center;
}
.line {
  height: 12px;
  text-align: center;
  font-size: 12px;
  opacity: 0.3;
}
</style>


